<!--
 * @Descripttion: 
 * @version: 
 * @Author: Xyl
 * @Date: 2023-05-08 22:02:40
 * @LastEditors: zoey
 * @LastEditTime: 2023-05-15 10:37:04
-->
<template>
  <div style="cursor:pointer;" @click="getHashDetail">
    <a-icon :style="iconStyle" type="small-dash" />
    <span :style="circleStyle1">
      <span
        style="display: inline-block; textAlign: center; color: #040C17; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;"
        v-if="data[data.length-5] && data[data.length-5].data_hash">哈希值：<br />{{ data[data.length-5].data_hash }}</span>
    </span>
    <span :style="lineStyle1"></span>
    <span :style="circleStyle2">
      <span
        style="display: inline-block; textAlign: center; color: #040C17; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;"
        v-if="data[data.length-4] && data[data.length-4].data_hash">哈希值：<br />{{ data[data.length-4].data_hash }}</span>
    </span>
    <span :style="lineStyle2"></span>
    <span :style="circleStyle3">
      <span
        style="display: inline-block; textAlign: center; color: #040C17; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;"
        v-if="data[data.length-3] && data[data.length-3].data_hash">哈希值：<br />{{ data[data.length-3].data_hash }}</span>
    </span>
    <span :style="lineStyle3"></span>
    <span :style="circleStyle4">
      <span
        style="display: inline-block; textAlign: center; color: #040C17; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;"
        v-if="data[data.length-2] && data[data.length-2].data_hash">哈希值：<br />{{ data[data.length-2].data_hash }}</span>
    </span>
    <span :style="lineStyle4"></span>
    <span :style="circleStyle5">
      <span
        style="display: inline-block; textAlign: center; color: #040C17; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;"
        v-if="data[data.length-1] && data[data.length-1].data_hash">哈希值：<br />{{ data[data.length-1].data_hash }}</span>
    </span>
    <!-- <a-spin :style="loadStyle" /> -->
    <!-- <a-button type="primary" @click="getHashDetail">Open Modal</a-button> -->
    <a-modal :width="800" v-model="visible" title="区块详细信息" @ok="handleOk">
      <a-table :columns="columns" :data-source="data" bordered>
      </a-table>
      <!-- <a-list item-layout="horizontal" :data-source="currModalShowform">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-list-item-meta :description="item.value">
          <a slot="title" href="">{{item.title}} </a>
        </a-list-item-meta>
      </a-list-item>
    </a-list> -->
    </a-modal>
  </div>
</template>

<script>
  import axios from 'axios';
  import { parseTime } from '@/utils/date.js';
  import { getCertificateNumber } from '@/utils/getcertificatenumber.js';
  // import { HomeOutlined } from '@ant-design/icons-vue';
  // import { defineComponent } from 'vue';
  const data = [];
  const columns = [
    {
      title: '区块高度',
      dataIndex: 'height',
      ellipsis: true,
      width: '10%',
    },
    {
      title: '区块序号',
      dataIndex: 'number',
      ellipsis: true,
      width: '10%',
    },
    {
      title: '前一区块哈希',
      dataIndex: 'previous_hash',
      ellipsis: true,
      width: '10%',
    },
    {
      title: '当前区块哈希',
      dataIndex: 'data_hash',
      ellipsis: true,
      width: '10%',
    },
    {
      title: '元数据',
      dataIndex: 'metedata',
      ellipsis: true,
      width: '10%',
    },
  ];
  const hash = "";
  // const currModalShowform = [
  //   // "title":"sY",
  //   // "value":"balablabala"
  // ];
  export default {
    data() {
      this.cacheData = data.map(item => ({ ...item }));
      return {
        data: [{
          data_hash: '',
          height: '',
          metedata: '',
          number: '',
          previous_hash: '',
        }],
        hash: data.data_hash,
        columns: columns,
        visible: false,
        // currModalShowform
      };
    },
    mounted() {
      // this.getAttackData();
      this.getHash();
      this.handleOk();
    },
    props: {
      // hash: {
      //   type: String,
      //   required: true,
      //   default: '哈希值：11111111'
      // },
      diameter: {
        type: String,
        default: '100px'
      }
    },
    // components: {
    //   HomeOutlined
    // },
    computed: {
      circleStyle1() {
        return {
          float: 'left',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: this.diameter,
          height: this.diameter,
          borderRadius: '50%',
          backgroundColor: '#91d5ff',
          color: 'white'
        }
      },
      lineStyle1() {
        return {
          float: 'left',
          height: '2px',
          width: '100px',
          backgroundColor: '#91d5ff',
          margin: '3% 0 4% 0',
          borderRadius: '1px',
          display: 'flex'
          // color: '#91d5ff'
        }
      },
      circleStyle2() {
        return {
          float: 'left',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: this.diameter,
          height: this.diameter,
          borderRadius: '50%',
          backgroundColor: '#91d5ff',
          color: 'white'
        }
      },
      lineStyle2() {
        return {
          float: 'left',
          height: '2px',
          width: '100px',
          backgroundColor: '#91d5ff',
          margin: '3% 0 4% 0',
          borderRadius: '1px',
          display: 'flex'
          // color: '#91d5ff'
        }
      },
      circleStyle3() {
        return {
          float: 'left',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: this.diameter,
          height: this.diameter,
          borderRadius: '50%',
          backgroundColor: '#91d5ff',
          color: 'white'
        }
      },
      lineStyle3() {
        return {
          float: 'left',
          height: '2px',
          width: '100px',
          backgroundColor: '#91d5ff',
          margin: '3% 0 4% 0',
          borderRadius: '1px',
          display: 'flex'
          // color: '#91d5ff'
        }
      },
      circleStyle4() {
        return {
          float: 'left',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: this.diameter,
          height: this.diameter,
          borderRadius: '50%',
          backgroundColor: '#91d5ff',
          color: 'white'
        }
      },
      lineStyle4() {
        return {
          float: 'left',
          height: '2px',
          width: '100px',
          backgroundColor: '#91d5ff',
          margin: '3% 0 4% 0',
          borderRadius: '1px',
          display: 'flex'
          // color: '#91d5ff'
        }
      },
      circleStyle5() {
        return {
          float: 'left',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: this.diameter,
          height: this.diameter,
          borderRadius: '50%',
          backgroundColor: '#91d5ff',
          color: 'white'
        }
      },
      iconStyle() {
        return {
          float: 'left',
          height: '100px',
          width: '100px',
          margin: '0 1% 0 0',
          display: 'flex',
          color: '#fff',
          fontSize: '100px',
          // backgroundColor: '#fff'
        }
      }
    },
    methods: {
      // async getAttackData() {
      //   const resData = await axios({
      //     methods: 'get',
      //     url: '/apilog/queryAllAttact'
      //   }).then((res) => {
      //     res.data.result.forEach((item) => {
      //       item.last_time = parseTime(item.last_time);
      //       item.start_time = parseTime(item.start_time);
      //       item.certificate_number = getCertificateNumber(item.certificate_number);
      //     })
      //     console.log("res:", res);
      //     this.data = res.data.result;
      //     // console.log(this.data);
      //     // this.datalt = this.data;
      //     // console.log(this.datalt);
      //     // let hash = this.data.map(item => ({ ...item.hash }));
      //     // console.log(this.data.hash);
      //   });
      // },
      showModal() {
        this.visible = true;
      },
      handleOk(e) {
        // console.log(e);
        this.visible = false;
      },
      async getHash() {
        const resData = await axios({
          methods: 'get',
          url: '/apilog/queryBlockData'
        }).then((res) => {
          // console.log("res2:", res);
          this.data = res.data.result;
          // console.log(this.data);
          // this.currModalShowform = this.data;
          // console.log(this.currModalShowform);
          // console.log(columns);
        });
      },
      async getHashDetail() {
        const resData = await axios({
          methods: 'get',
          url: '/apilog/queryBlockData'
        }).then((res) => {
          console.log("res2:", res);
          this.data = res.data.result;
          console.log(this.data);
          // this.currModalShowform = this.data;
          // console.log(this.currModalShowform);
          console.log(columns);
        });
        this.visible = true;
        // let obj = {
        //   "height":'',
        //   "number":'',
        //   "previous_hash":'',
        //   "data_hash":'',
        //   "mete_data":''
        // };
        // this.obj.forEach(item => {
        //   // this.data
        //   console.log("item:", item)

        //     //console.log("item.dataIndex", item.dataIndex)
        //     obj.height = item.height;
        // })
        // console.log("record!!!:", record);
        // for (let key in record) {
        //   let obj = {
        //     "title":'',
        //     "value":'',
        //   };
        //   this.columns.forEach(item => {
        //     //console.log("item:", item)
        //     if (item.dataIndex === key) {
        //     //console.log("item.dataIndex", item.dataIndex)
        //     obj.title = item.title
        //     }
        //   })
        //   //obj.title = key;
        //   obj.value = record[key];
        // this.currModalShowform.push(colums);
        // console.log(this.currModalShowform);
        //   this.visible = true;
        // }
      },
    }
  }
</script>